<script lang="ts" setup name="stockStatement">
import ProTable from "@/components/ProTable/index.vue";
import { Inventory } from "@/api/interface";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getStockStatementList, getStorehouseList, getInventoryGoodsList, getWaresCategoryList } from "@/api/modules/inventory";
import { ref } from "vue";
import { stockStatementType } from "@/utils/serviceDict";
import { formatDate } from "@/utils/date-formatter";
import { getLastQuarterDays } from "@/utils/date";

const proTable = ref<ProTableInstance>();
const column: ColumnProps<Inventory.ResStockRealSheetList>[] = [
  {
    type: "index",
    label: "序号",
    width: 60,
    search: {
      el: "date-picker",
      label: "业务日期",
      key: "date",
      order: 1,
      defaultValue: [formatDate(-getLastQuarterDays(), "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  {
    sortable: true,
    prop: "createTime",
    label: "业务日期",
    width: 180
  },
  {
    sortable: true,
    prop: "sourceNo",
    label: "单据号",
    width: 160,
    search: {
      el: "input",
      key: "sourceNo"
    }
  },
  {
    sortable: true,
    prop: "barcode",
    label: "条码",
    width: 160,
    search: {
      el: "input",
      key: "content",
      placeholder: "请输入原料名称或编码",
      label: "原料"
    }
  },
  {
    sortable: true,
    prop: "houseName",
    label: "仓库名称",
    enum: () => getStorehouseList({ pageNum: 1, pageSize: 9999 }),
    isFilterEnum: false,
    width: 120,
    fieldNames: { label: "name", value: "id" },
    search: {
      el: "select",
      key: "houseId"
    }
  },
  {
    sortable: true,
    prop: "goodsName",
    label: "原料名称",
    width: 130
    // isFilterEnum: false,
    // fieldNames: { label: "name", value: "id" },
    // enum: () => getInventoryGoodsList({ pageNum: 1, pageSize: 9999 }),
    // search: {
    //   el: "select",
    //   key: "categoryId",
    //   label: "选择原料"
    // }
  },
  {
    sortable: true,
    prop: "categoryName",
    label: "原料分类",
    width: 110,
    isFilterEnum: false,
    fieldNames: { label: "name", value: "id" },
    enum: () => getWaresCategoryList({ pageNum: 1, pageSize: 9999 }),
    search: {
      el: "tree-select",
      key: "categoryId",
      label: "原料分类"
    }
  },
  {
    sortable: true,
    prop: "typeName",
    label: "业务类型",
    enum: stockStatementType,
    isFilterEnum: false,
    search: {
      el: "select",
      key: "type",
      label: "单据类型"
    },
    width: 120
  },
  {
    sortable: true,
    prop: "unitName",
    label: "单位",
    width: 80
  },
  {
    sortable: true,
    prop: "quantity",
    label: "发生数量",
    width: 110
  },
  {
    sortable: true,
    prop: "price",
    label: "发生成本",
    width: 110
  },
  {
    sortable: true,
    prop: "amount",
    label: "发生金额",
    width: 110
  },
  {
    sortable: true,
    prop: "balanceQuantity",
    label: "结余数量",
    width: 110
  },
  {
    sortable: true,
    prop: "balancePrice",
    label: "结余成本",
    width: 110
  },
  {
    sortable: true,
    prop: "balanceAmount",
    label: "结余金额",
    width: 110
  }
];
</script>

<template>
  <div class="table-box">
    <ProTable
      title="库存流水列表"
      :columns="column"
      ref="proTable"
      pagination
      row-key="id"
      :indent="20"
      :request-api="getStockStatementList"
      highlight-current-row
    >
      <!-- <template #tableHeader>
      <el-button>新增流水</el-button>
    </template> -->
    </ProTable>
  </div>
</template>

<style lang="scss" scoped></style>
